<div id= "workspace" ng-controller="WorkspaceCtrl">
    <div id='page-title' ng-style="{width:titleWidth()}">{{localize('Nav Pane', 'Workspace')}}</div>
    <div id="menu" ng-style="{height: contentHeight()}">
        <ul>
            <li ng-repeat="item in listItems"
                class="selected-{{selected_item.id == item.id}}">
                <a ng-click="selectWorkspace(item)"
                   ng-mouseover="previewWorkspace(item)"
                   ng-mouseleave="previewWorkspace(null)"
                   ng-hide="item.children">
                    {{item.name}}
                </a>
                <span ng-hide="!item.children">
                    {{item.name}}
                </span>
                <ul ng-hide="!item.children">
                    <li ng-repeat="workspace in item.children" 
                        class="selected-{{selected_item.id == workspace.id}}">
                    <a ng-click="selectWorkspace(workspace)"
                       ng-mouseover="previewWorkspace(workspace)"
                       ng-mouseleave="previewWorkspace(null)">
                        {{workspace.name}}
                    </a>
                </ul>
            </li>
        </ul>
    </div>
    <div>
        <a>{{localize('Workspace', 'Continue')}}</a>
    </div>		
    <div id="content" ng-style="{width: contentWidth(), height: contentHeight()}">
        <div class='hidden-{{previewImg == null}}'>
            <img ng-src='{{previewImg}}' ng-style="{left: contentLeft, 'max-width': contentWidth()-30,'max-height': contentHeight()-60}"/>
        </div>
        <div class='hidden-{{previewText == null}}'>
            <div class="previewText">{{previewText}}</div>
        </div>
        <div id="continue_section" class="hidden-{{isNotFirstLaunch == 0}}">
            <a href="#/getstarted.html">{{localize('Workspace', 'Continue')}}&nbsp;&nbsp;&nbsp;&#9654;</a>
        </div>		
    </div>

</div>